<!-- 视图层 -->
<template>
    <div class="box">
       <!-- <ul>
          <li v-for="(item,index) in prolist" :key="index">
              <img :src="item.img1" alt="">
              <div>
                  <p>{{ item.proname }}</p>
                  <span>{{ item.originprice }}</span>
              </div>
          </li>
       </ul> -->
      <ul class="many_column" v-if="flag">
         <li v-for="item in proList" @click="goDetail(item.proid)">
            <img :src="item.img1">
            <van-text-ellipsis rows="3" :content="item.proname" />
            <p>{{ '¥'+item.originprice }}</p>
         </li>
      </ul>
      <ul class="switch_list" v-else>
        <li v-for="item in proList" @click="goDetail(item.proid)">
          <div class="left">
            <img :src="item.img1">
          </div>
          <div class="right">
            <van-text-ellipsis rows="3" :content="item.proname" />
            <p>{{ '¥'+item.originprice }}</p>
          </div>
         </li>
      </ul>
      <div class="swith" @click="flag=!flag">
        <van-icon size='30px' name="list-switch" v-if="flag" />
        <van-icon size='30px' name="list-switching" v-else />
      </div>
    </div>
  </template>
  
  <!-- 逻辑层 -->
  <script setup>
  import { getProList } from '@/api/home'
  import { onMounted,ref } from 'vue';
  import { getDetail } from '@/api/home';
  import {  useRouter } from 'vue-router';


  
  const route = useRouter();
  let {proList} =defineProps(['proList','scrollTop'])
  console.log(proList);
  const flag = ref(false);
  const goDetail=(id)=>{
    route.push({name:'detail',params:{proid:id}})
  }
  
  </script>
  
  
  <!-- 样式层 -->  
  <style lang="less" scoped>
    .box {
         padding: 10px;
          .many_column {
          column-count: 2;
           column-gap: 10px;
    li {
      width: 100%;
      min-height: 280px;
      margin-bottom: 10px;
      background-color: #fff;
      font-size: 13px;
      text-align: center;
      
      img {
        width: 80%;
        height: 150px;
        margin-top: 20px;
      }
      p{
       margin-top: 10px;
       font-size: 16px;
       color: red;
      }
    }
  }
  .switch_list {
    li {
      display: flex;
      justify-content: space-between;
      align-items: center;
      padding: 0px 5px;
      height: 140px;
      border-bottom: 1px solid #e097cd;
      font-size: 16px;
      margin-top: 10px;
      .left {
        width: 35%;
        img {
          width: 100%;
          height: 95px;
        }
      }
      .right {
        width: 60%;
        p{
          font-size: 18px;
          font-weight: 500;
          color: red;
          float: right;
          margin-right: 30px;
          margin-top: 20px;
        }
      }
    }
  }
 
  .swith {
    width: 40px;
    height: 40px;
    border: 1px solid grey;
    background-color: #4341413f;
    position: fixed;
    bottom: 60px;
    right: 15px;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: 50%;
    border:none
  }
}
  .box{
    background-color: rgb(255, 255, 255);
  }
  </style>
  